import React from 'react';
import {StyleSheet, Text, Image} from 'react-native';
import {Flex} from '@ant-design/react-native';

const SearchView = (props) => (
    <Flex style={styles.searchView}>
        <Flex style={styles.cityView} onPress={() => props.onGoCityPage()}>
            <Text style={styles.cityName} numberOfLines={1}>
                {props.CityName}
            </Text>
            <Image style={styles.cityIcon} source={require('~/assets/public/selectbottom.png')} />
        </Flex>
        <Flex style={styles.searchBar} onPress={() => props.onGoSearchPage()}>
            <Image style={styles.searchIcon} source={require('~/assets/shouye/sousuo2.png')} />
            <Text style={styles.searchText}>请输入楼盘名称</Text>
        </Flex>
    </Flex>
);

const styles = StyleSheet.create({
    searchView: {
        flexDirection: 'row',
    },
    cityView: {
        width: 60,
    },
    cityName: {
        width: 45,
    },
    cityIcon: {
        width: 8,
        height: 8,
    },
    searchBar: {
        flexGrow: 1,
        height: 25,
        borderRadius: 15,
        backgroundColor: 'white',
        marginLeft: 8,
    },
    searchIcon: {
        width: 14,
        height: 14,
        marginLeft: 10,
    },
    searchText: {
        fontSize: 13,
        color: 'lightgray',
        paddingLeft: 10,
    },
});

export default SearchView;
